<template >
      <layout  :showHome = "homeBtn "   :showBack = " !homeBtn"  :title="`${isEdit ?  '编辑' : '新增'}项目信息`" >
           
            <van-form @submit="onSubmit">
                <div  class="editClass"  > <span>基本信息</span>  </div>
                    <van-field
                        v-model="pageData.name"
                        name="项目名"
                        label="项目名"
                        placeholder="请输入项目名"
                        :rules="[{ required: true, message: '请输入项目名' }]"
                    />
                    <van-field
                        v-model="pageData.signTime"
                        clearable
                      
                        label="签订日期"
                        readonly
                        placeholder="请选择的签订日期" >
                        <template #button>
                            <van-button size="small" type="primary"     @click="dateShow = true"  native-type="button" >选择日期</van-button>
                        </template>
                
                    </van-field>

                    <van-field
                        v-model="myCity"
                        clearable
                      
                        label="选择省市"
                        readonly
                        placeholder="请选择的地址" >
                        <template #button>
                            <van-button size="small" type="primary"     @click="areaShow = true"  native-type="button" >选择省市</van-button>
                        </template>
                
                    </van-field>


                    <van-field
                        v-model="pageData.address"
                        name="详细地址"
                        label="详细地址"
                        placeholder="请输入详细地址"
                        :rules="[{ required: true, message: '请输入详细地址' }]"
                    />


                    <van-field
                        v-model="pageData.liableName"
                        clearable
                      
                        label="负责人"
                        readonly
                        placeholder="请选择负责人" >
                        <template #button>
                           <van-button size="small" type="primary"     @click="personShow = true"  native-type="button" >选择负责人</van-button>
                        </template>
                
                    </van-field>

                    <div  class="editClass"  > <span>业主信息</span>  </div>

                    <van-field
                        v-model="pageData.ownerName"
                        name="业主名字"
                        label="业主名字"
                        placeholder="请输入业主名字"
                        :rules="[{ required: true, message: '请输入业主名' }]"
                    />
                    <van-field
                        v-model="pageData.ownerAddress"
                        name="联系地址"
                        label="联系地址"
                        placeholder="请输入联系地址"
                        :rules="[{ required: true, message: '请输入联系地址' }]"
                    />
                    <van-field
                        v-model="pageData.ownerPhone"
                        name="联系电话"
                        label="联系电话"
                        placeholder="请输入联系电话"
                        :rules="[{ required: true, message: '请输入联系电话' },
                                {validator:phoneFunc,message:'请输入正确电话号码'}
                                  ]"
                    />

                    <div  class="editClass"  > <span>备注信息</span>  </div>
                     
                            <van-field
                                v-model="pageData.remark"
                                name="备注"
                                label="备注"
                                placeholder="请输入备注信息"
                               
                            />
                    <div style="margin: 16px;">
                        <van-button round block type="info" >提交</van-button>
                    </div>
            </van-form>
              
  
            
          <van-calendar v-model="dateShow" @confirm="dateEvt"   />
                
        <van-popup v-model="areaShow" position="bottom" :style="{ height: '308px' }"  :close-on-click-overlay = "false">
            <van-area title="标题" :area-list="areaList"   @confirm = 'areaEvt'  @cancel = 'areaShow =  false'     />
        </van-popup>

        <van-popup v-model="personShow" position="bottom" :style="{ height: '100%' }"  :close-on-click-overlay = "false">
                <div  class="person-content">
                         <i @click="personShow = false " >选择</i>
                           <div   @click="pickPerson(item)"     class="item"  v-for=" item in personList"   :key = 'item.id'>
                                {{ item.name }}---{{ item.dept }}
                        </div>
                </div>   
        </van-popup>
      </layout>
</template>

<script>
       import { areaList } from '@vant/area-data';
       import {userListApi} from '../../apis/userApi'
import { projectSaveApi,projectInfoApi, projectUpdateApi} from '../../apis/projectApi';

  const  myData  = {
            id:'',
            name:'',
            liableId:'',
            liableName:'',
            signTime:'',
            province:'',
            city:'',
            county:'',
            address:'',
            ownerId:'',
            ownerName:'',
            ownerAddress:'',
            ownerPhone:'',
            remark:'',
        
  }
  export  default {


      data(){



        return  {

          homeBtn:true,
          dateShow:false,
          areaShow:false,
          areaList:areaList,
          personShow:false,
          personList:[],
          pageData:{
            ...myData

          },
          myCity:'',
          isEdit:false,

        }
      },



      created(){

        // 1、普通写法

       /*  if (  !this.$route.query.fromPage ) {
              this.homeBtn =  false
        } else {
            this.homeBtn  = true
        } */
         // 2、简易写法
          this.homeBtn =  !this.$route.query.fromPage 

          userListApi({page:1, size:1000}).then(data=>{
                if( data.code === 200){
                        this.personList = data.data.rows
                }
          })


          //只有编辑功能按钮的时候，才会有一个项目的编码进来
          let  id =this.$route.query.id
                this.isEdit = !!id

                if(this.isEdit){


                    //如果是编辑状态，应该把当前编辑的数据获取回来

                   projectInfoApi(id).then(data =>{
                        if (data.code === 200) {
                        this.pageData = data.data
                        // 因为数据是mongodb处理以后的时间格式，需要处理为前端的格式
                        let _d = new Date(this.pageData.signTime)
                        this.pageData.signTime = _d.getFullYear() + '-' + (_d.getMonth() + 1) + '-' + _d.getDate()

                        this.myCity = this.pageData.province + '-' + this.pageData.city + '-' + this.pageData.county
                    } else {
                        this.$toast.fail('获取项目详细信息失败')
                        this.$router.go(-1)
                    }
                   })
                }
      },

      methods:{

        areaEvt(arg){
            this.areaShow = false
                this.pageData.province  = arg[0].name
                this.pageData.city =  arg[1].name
                this.pageData.county = arg[2].name

                this.myCity = arg[0].name + '-' + arg[1].name + '-' + arg[2].name
        },
        dateEvt(value){
          //  console.log(arguments)
       let  _d= new Date(value)
         this.pageData.signTime =  _d.getFullYear() + '-' + (_d.getMonth() + 1) + '-' + _d.getDate()
         this.dateShow = false

        },
        pickPerson(user){
         //   console.log(user)
        //    this.personShow =  false
            this.pageData.liableId = user.id
            this.pageData.liableName = user.name

        },


         ///   校验电话号码 ，查看vant组件库，得知：validator是一个方法， return  一个布尔值
         phoneFunc( value){
              return /^1[3-9]{1}[0-9]{9}$/.test(value)
         },



        // 页面数据提交

        async  onSubmit(){
                    if(this.isEdit){
                        let res = await projectUpdateApi(this.pageData)
                         if (res.code ===200){
                          this.$toast.success('更新成功')
                         
                         this.$router.go(-1)
                      }else{
                          this.$toast.fail('更新失败，请重试')
                      }
                    }else{
                           let result = await projectSaveApi(this.pageData)
                      if (result.code ===200){
                          this.$toast.success('保存成功')
                          this.pageData = {...myData}
                          this.myCity = ''
                      }else{
                          this.$toast.fail('保存失败，请重试')
                      }
                      }
                  
                     
                 }  
      }




  }


</script>

<style scoped   lang="less">
    @import '../../style/common.less';
 .van-form{

    display: block;
    padding: 3vh 0px 0px;
    height: 100%;

   > .editClass{

    padding: 0 12px;
    font-size: 0.9rem;
    font-weight: 300;
    height: 36px;
    line-height: 36px;

    }  
    
   
 }
 .van-popup--round {
    height: 54%  !important 
    
    }
    .person-content{
         display: block;
         position: relative;
         height: 100%;
         overflow-x: hidden;
           > i{
               display: block;
               position: absolute;
               top: 6px;
               right: 8px;
               width: 36px;
               height: 36px;
               border: solid  1px  #ddd;
               border-radius: 50%;
               position: fixed;
               border-radius: 50%;
    
                font-size: .7rem;
                text-align: center;
                line-height: 34px;
                background-color:@primary;

           }

           >.item{
               font-size: .7rem;
               color:#878787 ;
               line-height: 32px;
               height: 32px;
               padding: 0 12px;
               border-bottom: solid 1px  #ddd;
               &:last-child{
                border-bottom: none;
               }
               &:hover{
                   background-color: @primary;
               }
           }

    }
      
</style>